<template>
  <div>
    <div>
      <SpFilterForm :model="params" @onSearch="onSearch" @onReset="onSearch">
        <SpFilterFormItem prop="telephone" label="手机号:">
          <el-input v-model="params.telephone" placeholder="请输入手机号" />
        </SpFilterFormItem>
      </SpFilterForm>

      <el-table
        v-loading="loading"
        border
        :data="list"
        :height="wheight - 170"
        element-loading-text="数据加载中"
        :default-sort="{ prop: 'bind_date', order: 'descending' }"
      >
        <el-table-column prop="promoter_name" label="姓名" />
        <el-table-column prop="telephone" label="手机号" width="150">
          <template slot-scope="scope">
            {{ scope.row.telephone }}
          </template>
        </el-table-column>
        <el-table-column label="地址">
          <template slot-scope="scope">
            {{ scope.row.city }}
            {{ scope.row.province }}
            {{ scope.row.county }}
          </template>
        </el-table-column>
        <el-table-column prop="adrdetail" label="详细地址" />
        <el-table-column prop="wxgroup_name" label="微信群名或群号" />

        <el-table-column prop="group_num" label="微信群内实际人数" />

        <el-table-column label="微信群截图">
          <template slot-scope="scope">
            <el-image
              fit="contain"
              style="width: 100px; height: 100px"
              :src="scope.row.wx_group_pic"
              :preview-src-list="[scope.row.wx_group_pic]"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column label="营业执照">
          <template slot-scope="scope">
            <el-image
              style="width: 100px; height: 100px"
              :src="scope.row.business_license_pic"
              :preview-src-list="[scope.row.business_license_pic]"
              fit="contain"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column label="审核状态" width="80">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status === 1" size="mini" effect="plain"> 待审核 </el-tag>
            <el-tag v-if="scope.row.status === 2" size="mini" effect="plain" type="success">
              审核通过
            </el-tag>
            <el-tag v-if="scope.row.status === 3" size="mini" effect="plain" type="warning">
              审核拒绝
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.status === 1"
              type="text"
              slot="reference"
              @click="auditShow(scope.row.apply_id, scope.row.telephone)"
              >审核</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="content-padded content-center">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :current-page.sync="page.pageIndex"
          :total="total_count"
          :page-size="page.pageSize"
          @size-change="onSizeChange"
          @current-change="onCurrentChange"
        />
      </div>

      <!-- 审核开通虚拟店 -->
      <el-dialog
        title="销售团长审核"
        :visible.sync="updateShopVisible"
        :close-on-click-modal="false"
      >
        <template>
          <el-form>
            <el-form-item label="审核状态" label-width="100px">
              <el-radio-group v-model="shop_status">
                <el-radio :label="2"> 审核通过 </el-radio>
                <el-radio :label="3"> 审核拒绝 </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </template>
        <div slot="footer" class="dialog-footer content-center">
          <el-button @click.native="updateShopVisible = false"> 取消 </el-button>
          <el-button type="primary" @click="actionShopStatus"> 确定 </el-button>
        </div>
      </el-dialog>
      <!-- 审核开通虚拟店 -->
    </div>
    <router-view />
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { getPromoterApplyList, seckillActivityApplyAudit } from '../../api/promotions'
import { pageMixin } from '@/mixins'
export default {
  mixins: [pageMixin],
  data() {
    return {
      params: {
        telephone: ''
      },
      list: [],
      loading: false,
      updateShopVisible: false,
      shop_status: '',
      apply_id: '',
      telephone: '',
      total_count: 0
    }
  },
  mounted() {
    this.fetchList(this.params)
  },
  methods: {
    auditShow(apply_id, telephone) {
      this.apply_id = apply_id
      this.telephone = telephone
      this.updateShopVisible = true
    },
    actionShopStatus() {
      const data = {
        status: this.shop_status,
        apply_id: this.apply_id,
        telephone: this.telephone
      }
      seckillActivityApplyAudit(data).then((res) => {
        this.$message({ type: 'success', message: '操作成功' })
        this.fetchList()
        this.updateShopVisible = false
      })
      return true
    },
    fetchList() {
      this.loading = true
      const { pageIndex: page, pageSize } = this.page
      let params = {
        page,
        pageSize,
        ...this.params
      }
      getPromoterApplyList(params).then((res) => {
        console.log(res)
        this.list = res.data.data.list
        this.total_count = Number(res.data.data.total_count)
        this.loading = false
      })
    }
  },
  computed: {
    ...mapGetters(['wheight'])
  }
}
</script>
<style scoped lang="scss">
.grade-setting-col {
  line-height: 40px;
}

.btn-gap {
  margin-left: 10px;
}

.sp-filter-form {
  margin-bottom: 16px;
}
</style>
